<template>
  <d2-container>
    <template slot="header">
      <div style="display: flex;width: 100%">
        <div class="search" style="display: flex;justify-content: space-around;width: 50%;">
          <div class="search_box" style="display: flex;justify-content: space-around;width: 100%">
            <div class="search_uid" style="width: 25%">
              <el-input v-model="user.telhone" placeholder="用户ID" ></el-input>
            </div>
            <div class="search_telephone" style="width: 25%">
              <el-input v-model="user.telhone" placeholder="请输入手机号码"></el-input>
            </div>
            <div class="search_realname" style="width: 25%">
              <el-input v-model="user.telhone" placeholder="请输入用户真实姓名"></el-input>
            </div>
          </div>
          <div class="search_button" style="width: 20%">
            <el-button type="primary" style="width: 100%">点击查询</el-button>
          </div>
        </div>
        <div>
          <el-button type="primary" style="margin-left: 20px">点击添加数据</el-button>
        </div>
      </div>
    </template>
    <template>
      <el-table
              :data="tableData"
              stripe
              style="width: 100%">
        <el-table-column
                prop="uid"
                label="用户ID"
                width="180">
        </el-table-column>
        <el-table-column
                prop="username"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="password"
                label="用户密码"
                width="180">
        </el-table-column>
        <el-table-column
                prop="telphone"
                label="用户电话号码"
                width="180">
        </el-table-column>
        <el-table-column
                prop="real_name"
                label="真·姓名"
                width="180">
        </el-table-column>
        <el-table-column
              prop="create_time"
              label="注册时间"
              width="180">
      </el-table-column>
        <el-table-column
                prop="idcrad"
                label="身份证号码"
                width="180">
        </el-table-column>
        <el-table-column
                prop="sex"
                label="性别"
                width="180">
        </el-table-column>
        <el-table-column
                prop="address"
                label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small">编辑</el-button>
            <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
            <el-dialog
                    title="警告！"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose">
              <span>数据删除后将无法恢复，是否确认删除？</span>
              <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="danger" @click="dialogVisible = false">确 定</el-button>
  </span>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>

    </template>
    <template slot="footer">
      <template>
        <div class="block">
          <span class="demonstration">完整功能</span>
          <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="10"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="40">
          </el-pagination>
        </div>
      </template>
    </template>
  </d2-container>
</template>

<script>
import axios from 'axios'
const utils = require('utility')
export default {
  name: 'page1',
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    handleClick (row) {
      this.dialogVisible = true
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    async aaa () {
      const res = await axios.post('http://192.168.3.79:7001/user/list')
      this.tableData = res.data.data
      for (let v of this.tableData) {
        v.create_time = utils.logDate(v.create_time)
        v.create_time = '' + v.create_time
      }
    }
  },
  async created () {
    this.aaa()
  },
  data () {
    return {
      dialogVisible: false,
      user: {
        telhone: '',
        real_name: '',
        idcard: ''
      },
      tableData: [],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4
    }
  }

}
</script>
